<template>
  <div class="container">
    <div class="top-bt">
      <el-button type="back" icon="el-icon-arrow-left" @click="GoBack">返回</el-button>
      <el-button type="Submit" @click="submit">提交</el-button>
    </div>
    <div class="body-box">
      <h1>新建轮播页配置</h1>
      <component :is="com"></component>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!--输入框-->
        <el-form-item label=" 标题：" prop="name">
          <el-input v-model="ruleForm.name" placeholder="这里是轮播标题"></el-input>
        </el-form-item>
        <!--输入框-->
        <el-form-item label="  来源：" prop="name">
          <el-input v-model="ruleForm.name" placeholder="中纪委官网"></el-input>
        </el-form-item>

        <!-- 富文本编辑器组件 -->
        <!-- <Editor v-model="text"></Editor> -->
        <div class="text-editor-box">
          <h1 class="h1-2">内容：</h1>
          <quill-editor />
          <div class="bt-group">
            <el-button type="preview">预览</el-button>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
// import Preview from '@/components/preview/Preview.vue'
import Upload from "@/components/Upload/Upload.vue";
import Back from "@/components/Popup/Back";

export default {
  components: { Upload, Back },
  data() {
    return {
      //审核不通过挂在处
      com: "",
      ruleForm: {
        name: "",
        region: "",
        type: [],
      },
      rules: {
        name: [
          { required: true, message: "请输入图片名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    //   返回
    GoBack() {
      this.$router.go(-1);
    },
    // 提交
    submit() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  padding: 0;
  .top-bt {
    display: flex;
    justify-content: space-between;
    background: rgba(240, 242, 245, 1);
    padding-bottom: 20px;
    .el-button--back {
      width: 70px;
      height: 36px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      border: 1px solid rgba(221, 221, 221, 1);
      color: rgba(51, 51, 51, 1);
      padding: 0;
    }
    .el-button--Submit {
      width: 70px;
      height: 36px;
      background: rgba(61, 127, 255, 1);
      border-radius: 4px;
      border: 1px solid rgba(221, 221, 221, 1);
      color: #ffffff;
      padding: 0;
    }
  }
  .body-box {
    > h1 {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 60px;
      text-align: center;
      border-bottom: 1px solid #e4e7ed;
      margin-bottom: 20px;
    }
    .el-form {
      margin-top: 20px;
      padding-left: 41px;
    }
  }
}

// 富文本编辑器
.text-editor-box {
  display: flex;
  .h1-2 {
    width: 85px;
    height: 22px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    text-align: right;
  }
  .h1-2::before {
    content: "* ";
    color: #ff0000;
  }

  /deep/.bt-group {
    display: flex;
    align-items: flex-end;
    position: relative;
    .el-button--preview {
      width: 70px;
      height: 36px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      border: 1px solid rgba(61, 127, 255, 1);
      color: #3d7fff;
      padding: 0;
      margin-left: 10px;
      position: absolute;
      bottom: -330px;
    }
  }
  .quill-editor {
    /deep/.ql-container {
      min-height: 20vh;
      height: 500px ;
    }
  }
}
/deep/.quill-editor {
  width: 1350px;
  height: 200px;
  .ql-blank {
    padding-left: 0px;
  }
  .ql-containe {
    height: 158px;
  }
}
//form表单
/deep/.el-form {
  .el-form-item {
    margin: 0 0 16px 0;
    .el-form-item__label {
      width: 85px !important;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      padding: 0;
    }
    .el-form-item__content {
      margin-left: 85px !important;
      .el-input__inner {
        width: 460px;
        height: 36px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(221, 221, 221, 1);
        padding-left: 12px;
      }
    }
  }
  .pic-box {
    display: flex;
    padding-bottom: 10px;
    .h1-1 {
      width: 85px;
      height: 22px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      text-align: right;
    }
    .h1-1::before {
      content: "* ";
      color: #ff0000;
    }
  }
  .flex-box {
    display: flex;

    .pic-Tips {
      width: 360px;
      padding-top: 6px;
      padding-bottom: 15px;
      border-top: 1px solid #dddddd;
      margin-left: 82px;
      h1 {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 22px;
      }
    }
  }
}
/**图片上传大小修改88px */
/deep/.el-upload--picture-card {
  width: 88px;
  height: 88px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/.el-upload-list__item {
  width: 88px;
  height: 88px;
  margin-right: 0px;
}
/deep/.el-icon-zoom-in {
  font-size: 19px;
}
/deep/.el-icon-download {
  font-size: 19px;
}
/deep/.el-icon-delete {
  font-size: 19px;
}
.upload-box {
  width: 88px;
  height: 88px;
  overflow: hidden;
  ul {
    li {
      div {
        > span {
          display: flex;
        }
      }
    }
  }
}
</style>